 <!DOCTYPE html>
 <html>

 <head>
     <meta charset="utf-8">
     <title>Vue 实例</title>

     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
 </head>

 <body>
     <!--  指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。  -->
     <div id="app">
         <p v-bind:foo="foo">{{ foo }}</p>
         <!-- 这里的 `foo` 不会更新！ -->
         <button v-on:click="foo = 'baz'">Change it</button>

         <!-- v-bind 缩写方式 -->
         <p :foo="foo">{{ foo }}</p>

         <!-- v-on 缩写方式 -->
         <button @click="foo = 'baz缩写方式'">Change it</button>
     </div>
 </body>

 <script type="text/javascript">
     // 我们的数据对象
     // 建议所有用到的数据都预先在 data 内声明，这样不至于将数据散落在业务逻辑中，难以维护
     var data = {
         foo: 1
     }

     // 这会阻止修改现有的属性，也意味着响应系统无法再追踪变化
     // Object.freeze(data);


     // 该对象被加入到一个 Vue 实例中
     var vm = new Vue({
         el: '#app',
         data: data
     })

     // 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
     console.log(vm.$data === data) // => true
     console.log(vm.$el === document.getElementById('app')) // => true

     // $watch 是一个实例方法
     vm.$watch('foo', function(newValue, oldValue) {
         // 这个回调将在 `vm.foo` 改变后调用
         console.log('foo发生了变化：' + oldValue + ' -> ' + newValue)
     })


     // 获得这个实例上的属性
     // 返回源数据中对应的字段
     console.log(vm.foo == data.foo) // => true
     console.log(vm.foo)

     // 设置属性也会影响到原始数据
     vm.foo = 2
     console.log(data.foo) // => 2

     // ……反之亦然
     data.foo = 3
     console.log(vm.foo) // => 3
 </script>

 </html>